<template>
  <div class="getFormbox">
    <el-form
      ref="form"
      :model="formdata"
      label-width="80px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="用电企业">
            <FilterSelect2
              v-model="formdata.companyId"
              :optionlist="xitonglist"
              @changeSelect="changeqiye"
              :valuekey="{ name: 'name', value: 'id' }"
            ></FilterSelect2>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="年度">
            <el-date-picker
              style="width: 100%"
              v-model="formdata.year"
              type="year"
              value-format="yyyy"
              placeholder="选择年"
              size="small"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="月份">
            <el-select
              v-model="formdata.month"
              placeholder="请选择"
              size="small"
              style="width: 100%"
            >
              <el-option label="一月" value="1"></el-option>
              <el-option label="二月" value="2"></el-option>
              <el-option label="三月" value="3"></el-option>
              <el-option label="四月" value="4"></el-option>
              <el-option label="五月" value="5"></el-option>
              <el-option label="六月" value="6"></el-option>
              <el-option label="七月" value="7"></el-option>
              <el-option label="八月" value="8"></el-option>
              <el-option label="九月" value="9"></el-option>
              <el-option label="十月" value="10"></el-option>
              <el-option label="十一月" value="11"></el-option>
              <el-option label="十二月" value="12"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="期">
            <el-select
              v-model="formdata.period"
              placeholder="请选择"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in qilist"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-form-item label="">
            <el-button size="small" @click="chongzhi">重 置</el-button>
            <el-button size="small" type="primary" @click="gettablelist"
              >查 询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getzidianxialaapi } from '@/api/guidelines'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import dayjs from 'dayjs'
export default {
  name: 'CallPoliceGetForm',

  data() {
    return {
      formdata: {year:dayjs().format('YYYY')},
      xitonglist: [],
      qilist: []
    }
  },

  async mounted() {
    const {data: { list }} = await getCompanyListApi()
    this.xitonglist = list
    const {data: { list: array }} = await getzidianxialaapi({ dictType: 'EcmAnnualBudgetPeriod' })
    this.qilist = array
    const companyId = localStorage.getItem('companyId')
    this.$set(this.formdata,'companyId',companyId?+companyId:this.xitonglist[0].id)
    this.gettablelist()
  },

  methods: {
    chongzhi() {
      this.formdata={year:dayjs().format('YYYY')}
      const companyId = localStorage.getItem('companyId')
      this.$set(this.formdata,'companyId',companyId?+companyId:this.xitonglist[0].id)
      this.gettablelist()
    },
    gettablelist() {
      this.$emit('getlist',this.formdata)
    },
    changeqiye(val) {
      localStorage.setItem('companyId', val)
    },
  }
}
</script>
<style lang="scss" scoped>
.getFormbox {
  height: 80px;
  padding: 20px;
  background-color: #fff;
  margin-bottom: 10px;
}
</style>
